<template>
  <view class="edit-container">
    <go-back></go-back>

    <view class="nav-header">
      <text class="page-title">编辑资料</text>
    </view>

    <!-- 编辑表单 -->
    <view class="edit-form">
      <!-- 头像上传 -->
      <view class="form-item avatar-upload">
        <view class="avatar-wrapper">
          <uni-file-picker
            limit="1"
            :del-icon="false"
            :imageStyles="imageStyles"
            file-mediatype="image"
            @select="selectImage"
          ></uni-file-picker>
        </view>
        <text class="upload-tip">点击上传新头像</text>
      </view>

      <!-- 昵称输入 -->
      <view class="form-item">
        <text class="label">昵称</text>
        <input
          class="input"
          type="text"
          v-model="formData.nickname"
          placeholder="请输入昵称"
          maxlength="12"
        />
      </view>

      <!-- 性别选择 -->
      <view class="form-item">
        <text class="label">性别</text>
        <view class="radio-group">
          <view
            class="radio-item"
            :class="{ active: formData.gender == '1' }"
            @click="formData.gender = '1'"
          >
            <text>男</text>
          </view>
          <view
            class="radio-item"
            :class="{ active: formData.gender == '0' }"
            @click="formData.gender = '0'"
          >
            <text>女</text>
          </view>
        </view>
      </view>

      <!-- 归属地选择 -->
      <view class="form-item">
        <text class="label">归属地</text>
        <input
          class="input"
          type="text"
          v-model="formData.location"
          placeholder="请输入归属地"
          maxlength="20"
        />
      </view>

      <!-- 个人简介输入 -->
      <view class="form-item">
        <text class="label">个人简介</text>
        <textarea
          class="textarea"
          v-model="formData.intro"
          placeholder="介绍一下自己吧"
          maxlength="50"
        ></textarea>
        <text class="input-count">{{ formData.intro.length }}/50</text>
      </view>
    </view>

    <!-- 保存按钮 -->
    <view class="save-btn-wrapper">
      <button class="save-btn" @click="saveProfile">保存</button>
    </view>
  </view>
</template>

<script setup>
  import { ref, onMounted } from "vue";
  import { getUserInfo } from "@/api/user";
  import { editPersonal } from "@/api/personal";

  import GoBack from "@/components/goBack/goBack.vue";

  const imageStyles = {
    width: "160rpx",
    height: "160rpx",
    border: {
      radius: "50%",
    },
  };
  // 表单数据
  const formData = ref({
    avatar: "",
    nickname: "",
    gender: "",
    location: "",
    intro: "",
  });

  // 获取用户信息
  const getUserInfoData = async () => {
    try {
      const res = await getUserInfo();
      const userData = res.data;
      // 填充表单数据
      formData.value = {
        avatar: userData.avatar || "",
        nickname: userData.nickname || "",
        gender: userData.gender || "",
        location: userData.location || "",
        intro: userData.intro || "",
      };
    } catch (error) {
      console.error("获取用户信息失败", error);
      uni.showToast({
        title: "获取用户信息失败",
        icon: "none",
      });
    }
  };

  // 选择图片
  const selectImage = async (e) => {
    if (!e.tempFiles?.length) {
      uni.showToast({ title: "请选择图片", icon: "none" });
      return;
    }
    console.log(e.tempFiles);

    for (const file of e.tempFiles) {
      const res = await uni.uploadFile({
        url: "http://localhost:8000/index/campus/uploadImage",
        filePath: file.path,
        name: "file",
        formData: { filename: file.name },
      });

      const data = JSON.parse(res.data);
      formData.value.avatar = data.data[0];
    }
  };

  // 保存资料
  const saveProfile = async () => {
    // 表单验证
    if (!formData.value.nickname.trim()) {
      uni.showToast({
        title: "请输入昵称",
        icon: "none",
      });
      return;
    }

    try {
      await editPersonal(formData.value);
      uni.showToast({
        title: "保存成功",
        icon: "success",
      });
      uni.navigateBack();
    } catch (error) {
      console.error("保存失败", error);
      uni.showToast({
        title: "保存失败",
        icon: "none",
      });
    }
  };

  onMounted(() => {
    getUserInfoData();
  });
</script>

<style lang="scss" scoped>
  .edit-container {
    min-height: 100vh;
    background-color: #f8f8f8;

    .nav-header {
      display: flex;
      align-items: center;
      padding: 20rpx 30rpx;
      background-color: #ffffff;
      position: relative;

      .page-title {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        font-size: 32rpx;
        font-weight: 500;
        color: #333;
      }
    }

    .edit-form {
      background-color: #ffffff;
      margin-top: 20rpx;
      padding: 30rpx;

      .form-item {
        margin-bottom: 40rpx;
        position: relative;

        .label {
          font-size: 28rpx;
          color: #333;
          margin-bottom: 20rpx;
          display: block;
        }

        .input {
          width: 100%;
          height: 80rpx;
          background-color: #f5f5f5;
          border-radius: 12rpx;
          padding: 0 24rpx;
          font-size: 28rpx;
        }

        .textarea {
          width: 100%;
          height: 200rpx;
          background-color: #f5f5f5;
          border-radius: 12rpx;
          padding: 24rpx;
          font-size: 28rpx;
        }

        .input-count {
          position: absolute;
          right: 24rpx;
          bottom: 24rpx;
          font-size: 24rpx;
          color: #999;
        }

        .radio-group {
          display: flex;
          gap: 30rpx;

          .radio-item {
            flex: 1;
            height: 80rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #f5f5f5;
            border-radius: 12rpx;
            font-size: 28rpx;
            color: #666;
            transition: all 0.3s ease;

            &.active {
              background-color: #ff2442;
              color: #ffffff;
            }
          }
        }
      }

      .avatar-upload {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        .avatar-wrapper {
          position: relative;
          width: 160rpx;
          height: 160rpx;
          display: flex;
          align-items: center;
          flex-direction: column;
        }
        .upload-tip {
          margin-top: 10rpx;
          font-size: 26rpx;
          text-align: center;
        }
      }
    }

    .save-btn-wrapper {
      padding: 40rpx 30rpx;

      .save-btn {
        width: 100%;
        height: 88rpx;
        line-height: 88rpx;
        background-color: #ff2442;
        color: #ffffff;
        font-size: 32rpx;
        border-radius: 44rpx;
        font-weight: 500;
        border: none;

        &:active {
          opacity: 0.9;
        }
      }
    }
  }
</style>
